<template>
  <div class="flv-container">
    <video
      ref="videoPlayer"
      :id="id"
      :class="className"
      :width="width"
      :height="height"
      :muted="muteds"
      :poster="poster"
      :controls="controls"
      disablePictureInPicture
      controlslist="nodownload"
      oncontextmenu="return false;"
    ></video>
  </div>
</template>
<script>
import  '@/assets/flv.min.js';
export default {
  props: {
    playerOption: {
      type: Object,
      default() {
        return {};
      }
    },
    id: {
      type: String,
      default: "flvPlayer"
    },
    className: {
      type: String,
      default: "playerClass"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    poster: {
      type: String,
      default: ""
    },
    controls: {
      type: Boolean,
      default: true
    },
    muteds: {
        type: Boolean,
        default: false
    },
  },
  data() {
    return {
      player: null,
      settings: {
        enableWorker: false,
        enableStashBuffer: false,
        stashInitialSize: 1,
        lazyLoad: false,
        lazyLoadMaxDuration: 1,
        lazyLoadRecoverDuration: 1,
        deferLoadAfterSourceOpen: false,
        autoCleanupMaxBackwardDuration: 60,
        autoCleanupMinBackwardDuration: 30,
        statisticsInfoReportInterval: 1000,
        fixAudioTimestampGap: false,
        ENABLE_CALLBACK: false,
        ENABLE_WARN: false,
        autoCleanupSourceBuffer: true,//自动清除缓存
        enableDurationMonitor: true,  // true表示监测当前直播流延时，当发现延时过大时，主动追赶
        enableVideoFrozenMonitor: true, // 监测视频解码是否停滞（画面卡停），当因为某些原因导致无法解码时，将上报VIDEO_FROZEN事件，收到后建议重拉流
        decreaseDurationStep: 2,  // 每次追赶至缓冲区末尾之前的多少秒
        audioGainLevel: 2,
      },
      isPaused:false,
      paramsData: { //修改后的
        type: this.playerOption.type,
        url: this.playerOption.url,
        hasAudio: this.playerOption.status_stream_audio,
        hasVideo: this.playerOption.status_stream,
        isLive: true,
        cors: true,
      }
    };
  },
  mounted() {
    this.init();
  },
  watch: {
    playerOption: {
      handler(newVal, oldVal) {
        this.player && this.player.destroy();
        this.paramsData.segments && (this.paramsData.segments = undefined)
        this.init();
      },
      deep: true,
    },
  },
  beforeDestroy() {
    if (!this.player) {
      return;
    }
    this.player.pause();
    this.player.unload();
    this.player.detachMediaElement();
    this.paramsData.segments && (this.paramsData.segments = undefined)
    this.player.destroy();
    this.player = null;
  },
  methods: {
    init() {

      if (flvjs.isSupported()) {
        var videoElement = document.getElementById(this.id);
        videoElement.volume = 0.5
        
        this.player = flvjs.createPlayer(this.paramsData, this.settings);
        this.player.attachMediaElement(videoElement);
        this.player.load();
        // this.player.play();

        this.$refs.videoPlayer.onplay=e=>{
            this.playListener();
        }
        this.$refs.videoPlayer.onpause=e=>{
            this.pauseListener();
        }
        this.$refs.videoPlayer.onerror=e=>{
            this.getTime();
            // console.log("直播出错了",e)
        }
        this.$refs.videoPlayer.onabort=e=>{
            this.getTime();
            //console.log("直播中止了")
        }
        this.$refs.videoPlayer.onstalled=e=>{
            this.getTime();
            //console.log("媒体数据不可用")
        }
        this.$refs.videoPlayer.onsuspend=e=>{
            this.getTime();
            //console.log("媒体数据加载被阻止")
        }
        this.$refs.videoPlayer.ontimeupdate=e=>{
            // this.getTime();
            // //console.log(e,"播放中")
        }
        this.$refs.videoPlayer.oncanplay=e=>{
            if(e.target.paused){
                this.player.play();
            }
        }
      }
    },
    getTime(){
        let date = new Date();
        let hour = date.getHours();
        let minute = date.getMinutes();
        let second = date.getSeconds();
    },
    playListener(){
        if(this.isPaused){
            this.player && this.player.destroy();
            this.paramsData.segments && (this.paramsData.segments = undefined)
            this.init();
            this.isPaused = false;
        }
    },
    pauseListener(){
        this.isPaused = true;
        this.player.pause();
    },
  }
};
</script>
<style lang="scss">
.flv-container {
  display: inline-block;
  width: 100%;
  height: 100%;
  //    进度条
  video::-webkit-media-controls-timeline {
    display: none;
  }

  video::-ms-media-controls-timeline {
    display: none;
  }

  video::-o-media-controls-timeline {
    display: none;
  }

  video::-moz-media-controls-timeline {
    display: none;
  }

  //去掉边框蓝色线
  video {
    outline: none;
    object-fit: fill;
  }
}
</style>
